<template>
    <div class="addspu_container">
        <el-card>
            <el-form size="large" :model="spuForm" :rules="spuRules" ref="spuForms" label-width="96">
                <!-- SPU名称 -->
                <el-form-item label="SPU名称" prop="spuName">
                    <el-input v-model="spuForm.spuName" placeholder="请输入SPU名称"></el-input>
                </el-form-item>
                <!-- SPU品牌 -->
                <el-form-item label="SPU品牌" prop="tmId">
                    <el-select v-model="spuForm.tmId" placeholder="请选择品牌" size="large">
                        <el-option v-for="item in tmList" :key="item.id" :label="item.tmName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- SPU描述 -->
                <el-form-item label="SPU描述">
                    <el-input v-model="spuForm.description" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea"
                        placeholder="请输入SPU描述" />
                </el-form-item>
                <!-- SPU图标 -->
                <el-form-item label="SPU图标">
                    <el-upload v-model:file-list="spuImageList" action="/api/admin/product/fileUpload"
                        list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible" width="32%">
                        <img class="dialog_img" :src="dialogImageUrl" />
                    </el-dialog>
                </el-form-item>
                <!-- SPU销售属性 -->
                <el-form-item label="SPU销售属性">
                    <!-- 添加属性选择框 -->
                    <el-select v-model="spuSaleAttrId" :placeholder="spuAttrPlaceholder" size="large">
                        <el-option v-for="item in attrList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                    <!-- 添加属性按钮 -->
                    <el-button :disabled="!spuSaleAttrId" type="primary" size="large" icon="Plus" style="margin-left: 20px;"
                        @click="handleAddSpuAttr">添加属性</el-button>
                    <!-- 属性表格 -->
                    <el-table style="margin-top: 20px;" :data="spuSaleAttrList" border stripe>
                        <!-- 序号 -->
                        <el-table-column type="index" label="序号" width="120" align="center" />
                        <!-- 销售属性名称 -->
                        <el-table-column prop="saleAttrName" label="销售属性名称" width="200" align="center" />
                        <!-- 销售属性值 -->
                        <el-table-column prop="prop" label="销售属性值" width="width" align="left">
                            <template #="{ row }">
                                <el-tag style="margin-right: 10px;" v-for="(item, index) in row.spuSaleAttrValueList"
                                    :key="index" closable :disable-transitions="false" @close="handleClose(item, row)">
                                    {{ item.saleAttrValueName }}
                                </el-tag>
                                <el-input v-if="row.flag" ref="InputRef" v-model="valueName" size="default"
                                    placeholder="请输入属性值" style="display: inline;" @blur="handleInputConfirm(row)" />
                                <el-button v-else size="default" icon="Plus" @click="handleAddSpuAttrValueName(row)" />
                            </template>
                        </el-table-column>
                        <!-- 操作 -->
                        <el-table-column prop="prop" label="销售属性值" width="200" align="center">
                            <template #="{ row }">
                                <el-button type="danger" size="default" icon="Delete"
                                    @click="deleteSpuAttr(row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="spuSaleAttrList.length < 1" type="primary" size="large"
                        @click=handleSave>保存</el-button>
                    <el-button size="large" @click="handleCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reqGetTrademark } from "@/api/product/trademark"
import { reqGetBaseSaleAttrList, reqGetSpuImgList, reqGetSpuAttrList } from '@/api/product/spu'
import { onMounted, ref, reactive, computed, nextTick } from 'vue';
import { ElMessage } from 'element-plus'
import $bus from '@/bus'
import useProductStore from '@/store/modules/product'

const productStore = useProductStore()
const spuInfo = defineProps(['spuInfo'])
let tmList = ref<any>([]) // 品牌列表
let attrList = ref<any>([]) // 销售属性列表
let attrListCopy = ref<any>([]) // 备份销售属性列表
let spuForm = reactive<any>({ // spu表单
    spuName: "", // spu名称
    tmId: null, // 所属品牌id
    description: "", // spu描述
    category3Id: 0, // 三级列表id   
    id: 0
})
let spuForms = ref<any>() // 获取form根节点
//表单验证规则
const spuRules = {
    spuName: [
        { required: true, message: 'spu名称不能为空', trigger: 'change' },
    ],
    tmId: [
        { required: true, message: '品牌不能为空', trigger: 'change' },
    ],
}
let spuImageList = ref<any>([])// 上传的spu图片列表
let spuSaleAttrId = ref<any>(null) // spu的销售属性id
let valueName = ref<any>('') // spu销售属性值
const InputRef = ref<any>() // 获取输入属性值的input元素
let spuSaleAttrList = ref<any>([])// spu销售属性列表

let spuAttrPlaceholder = computed(() => {
    if (attrList.value.length == 3) {
        return '还未选择3个'
    } else if (attrList.value.length == 2) {
        return '还未选择2个'
    } else if (attrList.value.length == 1) {
        return '还未选择1个'
    } else {
        return '暂无数据可选择'
    }
})

const dialogImageUrl = ref<any>('') // 放大后的图片地址
const dialogVisible = ref<any>(false) // 是否放大图片

onMounted(() => {
    getTm()
    getAttrList()
    if (spuInfo.spuInfo) {
        // 修改spu时初始化传递过来的数据
        spuForm.spuName = spuInfo.spuInfo.spuName
        spuForm.tmId = spuInfo.spuInfo.tmId
        spuForm.description = spuInfo.spuInfo.description
        spuForm.id = spuInfo.spuInfo.id
        // 编辑spu时获取图片和销售属性列表数据
        getSpuImgList(spuInfo.spuInfo.id)
        getSpuAttrList(spuInfo.spuInfo.id)
    }
})


// 移除图片
const handleRemove = (file: any, fileList: any) => {
    if (file.status == 'success' && 'ready') {
        spuImageList.value = fileList.filter((item: any) => item !== file)
    }
}

// 放大图片
const handlePictureCardPreview = (file: any) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}
// 添加spu属性
const handleAddSpuAttr = () => {
    attrList.value = attrList.value.filter((item: any) => {
        if (item.id == spuSaleAttrId.value) { // 当前选中的属性
            const obj = {
                baseSaleAttrId: item.id,
                saleAttrName: item.name,
                flag: false,
                spuSaleAttrValueList: []
            }
            spuSaleAttrList.value.push(obj)
        } else { // 留下未选中的属性
            return item
        }
    })
    spuSaleAttrId.value = null // 清空销售属性选择框
}
// 添加spu属性值
const handleAddSpuAttrValueName = (row: any) => {
    row.flag = true // 隐藏添加按钮
    nextTick(() => {
        InputRef.value.focus()
    })
}
// input失去焦点时触发
const handleInputConfirm = (row: any) => {

    // 输入值为空直接退出函数执行
    if (valueName.value.trim() == '') {
        ElMessage.error('属性值不能为空')
        return;
    }
    // 判断输入值是否重复
    const isRepeat = row.spuSaleAttrValueList.some((item: any) => {
        return item.saleAttrValueName == valueName.value
    })
    // 输入值重复直接退出函数执行
    if (isRepeat) {
        ElMessage.error('属性值不能重复')
        return;
    }

    row.spuSaleAttrValueList.push({ baseSaleAttrId: row.baseSaleAttrId, saleAttrValueName: valueName.value })
    row.flag = false // 显示添加按钮
    valueName.value = '' // 清空记录的input框的值
}
// 删除属性值
const handleClose = (item: any, row: any) => {
    // 遍历销售属性列表
    spuSaleAttrList.value.forEach((spuAttrItem: any) => {
        // 找到当前点击那一项销售属性
        if (spuAttrItem.baseSaleAttrId == row.baseSaleAttrId) {
            // 遍历当前销售属性下的属性值列表，并过滤掉当前点击的那一项属性值
            spuAttrItem.spuSaleAttrValueList = spuAttrItem.spuSaleAttrValueList.filter((valueItem: any) => valueItem !== item)
        }
    })
}
// 删除销售属性
const deleteSpuAttr = (row: any) => {
    // 删除销售属性列表中存入的数据
    spuSaleAttrList.value = spuSaleAttrList.value.filter((item: any) => item !== row)
    // 将对应备份的销售属性数据添加到attrList里
    attrListCopy.value.forEach((item: any) => {
        if (item.id == row.baseSaleAttrId) {
            attrList.value.push(item)
        }
    })
}
// 点击取消按钮
const handleCancel = () => {
    // 通知父组件将页面状态切换为'list'
    $bus.emit('cancel')
}
// 点击保存按钮
const handleSave = async () => {
    await spuForms.value.validate() // 等待表单验证通过后在执行下面代码
    // 整理数据
    let imgList = <any>[]
    spuImageList.value.forEach((item: any) => {
        let imgObj = {
            id: item.id,
            imgName: item.name,
            imgUrl: '',
            spuId: item.spuId
        }
        if (item.response) { // 新增图片
            imgObj.imgUrl = item.response.data
        } else { // 原有图片
            imgObj.imgUrl = item.url
        }
        imgList.push(imgObj)
    })
    // 收集数据
    const data = {
        spuName: spuForm.spuName,
        description: spuForm.description,
        category3Id: productStore.category3Id,
        tmId: spuForm.tmId,
        spuImageList: imgList,
        spuSaleAttrList: spuSaleAttrList.value,
        id: spuForm.id || undefined
    }
    if (spuForm.id) { // 修改spu
        try {
            await productStore.editSpuInfo(data)
            $bus.emit('cancel') // 通知父组件将页面状态切换为'list'
            ElMessage.success('更新成功')
            productStore.getSpuList() // 重新获取spu列表

        } catch (error) {
            ElMessage.error(error)
        }
    } else { // 保存spu
        try {
            await productStore.saveSpuInfo(data)
            $bus.emit('cancel') // 通知父组件将页面状态切换为'list'
            ElMessage.success('保存成功')
            productStore.getSpuList() // 重新获取spu列表

        } catch (error) {
            ElMessage.error(error)
        }
    }

}

// 获取品牌列表
const getTm = async () => {
    const result = await reqGetTrademark()
    if (result.code == 200) {
        tmList.value = result.data
    }
}
// 获取主要销售属性列表
const getAttrList = async () => {
    const result = await reqGetBaseSaleAttrList()
    if (result.code == 200) {
        attrList.value = result.data
        attrListCopy.value = result.data
    }
}
// 获取spu图片列表
const getSpuImgList = async (id: any) => {
    const result: any = await reqGetSpuImgList(id)
    if (result.code == 200) {
        let arr = result.data // 尽量不要对服务器的数据直接进行遍历
        // 由于element-plus的图片列表展示需要有name和url字段
        // 所以这边将服务器数据中的imgName和imgUrl改为name和url
        let imgList = <any>[]
        arr.forEach((item: any) => {
            let obj = {
                id: item.id,
                spuId: item.spuId,
                name: item.imgName,
                url: item.imgUrl
            }
            imgList.push(obj)
        })

        spuImageList.value = imgList
    }
}
// 获取销售属性列表
const getSpuAttrList = async (id: any) => {
    const result: any = await reqGetSpuAttrList(id)
    if (result.code == 200) {
        spuSaleAttrList.value = result.data
        // 过滤获取的属性列表防止多次选择同个属性
        attrList.value = attrList.value.filter((item1: any) => !spuSaleAttrList.value.some((item2: any) => item1.id === item2.baseSaleAttrId))
    }
}
</script>

<style scoped lang=scss>
.addspu_container {
    width: 100%;
    margin-top: 20px;

    .dialog_img {
        width: 100%;
        height: 100%;
    }

    .sale_attr_value_name {
        background-color: #ecf5ff;
        display: inline;
        padding: 2px 10px;
        color: #409eff;
        border-radius: 4px;
        margin-right: 12px;
    }


}
</style>